html{
    font-size: 14px;
}
body{
    width: 100vw;
    height: 100vh;
    display: grid;
    justify-content: center;
    align-items: center;
    background-color: darkcyan;
    main{
        width: 200px;
        height: 200px;
        transform-origin: center center -100px;
        position: relative;
        transform-style: preserve-3d;
        transition-duration: 3s;
        transform: perspective(900px);
        div{
            width: 200px;
            height: 200px;
            border: solid 1px chartreuse;
            background-color: crimson;
            position: absolute;
            transform-origin: center center -100px;
            @for $i from 1 to 5 {
                &:nth-child(#{$i}){
                    transform: rotateY(#{$i * 90}deg);
                }
            }
            &:nth-child(5){
                transform: rotateX(90deg);
            }
            &:nth-child(6){
                transform: rotateX(-90deg);
            }
        }
    }
    &:hover{
       main{
           transform: perspective(900px) rotateX(360deg) rotateY(360deg);
       } 
    }
}